<template>
	<div class="shopinfo">
        <div class="card-demo-flex card-demo-content01">
            <div>
                <h4 style="text-align:center">迪欧咖啡</h4>
            </div>
            <div>
                <p>相册</p> 
            </div> 
        </div>
        <cell title="地址" value="上海市徐汇区番禺路1028号"></cell>
        <cell title="联系电话" value="021-123456"></cell>
        <card :header="{title:'预付卡（不仅能自己消费使用，还能送给好友哦）'}">
            <checker :value.sync="demo2" default-item-class="demo2-item" selected-item-class="demo2-item-selected" slot="content">
                <cell title="普通预付卡" value=""></cell>
                    <checker-item index="48">50元<br/>
                   现价48元</checker-item>
                   <checker-item index="90">100元<br/>
                   现价90元</checker-item>
                   <checker-item index="280">300元<br/>
                   现价280元</checker-item>
                   <checker-item index="450">500元<br/>
                   现价450元</checker-item>
                   <checker-item index="190">200元<br/>
                   现价190元</checker-item>
                   <checker-item index="300">350元<br/>
                   现价300元</checker-item> 
                <cell title="畅享次卡" value=""></cell> 
                   <checker-item value="48">10次<br/>
                   现价48元</checker-item>
                   <checker-item value="90">30次<br/>
                   现价90元</checker-item>
                   <checker-item value="190">50次<br/>
                   现价190元</checker-item>
                   <checker-item value="280">80次<br/>
                   现价280元</checker-item>
                   <checker-item value="300">100次<br/>
                   现价300元</checker-item>
                   <checker-item value="450">200次<br/>
                   现价450元</checker-item>
            </checker>
        </card>
        <cell title="购买须知" value="" is-link></cell>
        <cell title="店铺介绍" value="" is-link></cell>
        <cell title="营业时间" value="10:00-22:00 周一至周日"></cell>
        <panel header="热门推荐" :list="list"></panel>
        <x-button type="primary">立即购买48元 80244人已购</x-button>
    </div>
</template>
<script>
	import { Cell, XInput,XButton,Card ,Checker,CheckerItem, CellFormPreview,Panel} from "./index.js"
	export default {
		data (){
			return {
                demo2: '2',
			
      list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'XX咖啡',
        desc: 'XX卡：面值300元仅售200元',
        url:""
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'XX咖啡',
        desc: 'XX卡：面值300元仅售200元',
        url:""
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'XX咖啡',
        desc: 'XX卡：面值300元仅售200元',
        url:""
      }]
			
			}
		},
		components: {
		   Cell,
		   XInput,
		XButton ,
			Card,
			CellFormPreview,
            Panel ,
            Checker,
            CheckerItem
		},
		methods: {
					
			saveData: function () {

	let xx = 	{
					"sessionId":"ed852194-ceb9-4316-b3cb-ef972f96d233","cardProductInfo":{"state":"normal","name":"card1","price":"1200","quantity":"3000","expireDate":"360","denomination":"150000","cardType":"normal"}
	}
	this.$http.post(this.$store.state.rests.addCard.url,xx).then(res => {
				console.log(res,"1111")
				}).then(err =>{
					console.error(err);
				})
			}
			
		}
	}
	</script>
<style scoped lang="less">

.demo2-item {
  width: 110px;
  height: 60px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5%;
  line-height: 30px;
  text-align: center;
  margin:10px 0;
}
.demo2-item-selected {
  border-color: green;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
